<script setup lang="ts">
import { reactive } from 'vue'

// 工程数据
const projectData = reactive({
  totalProjects: {
    count: '4,872',
    monthly: '+128',
    active: '3,245',
    avgModules: '12.5',
    growthRate: '+15.2%'
  },
  totalModules: {
    count: '58,464',
    monthly: '+1,536',
    basic: '12,345',
    functional: '35,678',
    reuseRate: '68.5%'
  },
  totalModels: {
    count: '23,456',
    monthly: '+624',
    data: '15,789',
    business: '7,667',
    usageRate: '82.3%'
  }
})
</script>

<template>
  <div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- 工程总数卡片 -->
      <div class="rounded-lg border border-gray-200 bg-white shadow-sm p-5">
        <div class="flex items-center justify-between mb-4">
          <div>
            <h3 class="text-sm font-medium text-gray-500">工程总数</h3>
            <p class="text-2xl font-bold text-gray-800 mt-1">{{ projectData.totalProjects.count }}</p>
          </div>
          <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
            <i class="fas fa-project-diagram text-amber-500 text-lg"></i>
          </div>
        </div>
        <div class="space-y-3">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">本月新增</span>
            <span class="text-sm font-medium text-green-600">{{ projectData.totalProjects.monthly }}</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">活跃工程</span>
            <span class="text-sm font-medium text-amber-600">{{ projectData.totalProjects.active }}</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">平均模块数</span>
            <span class="text-sm font-medium text-gray-800">{{ projectData.totalProjects.avgModules }}</span>
          </div>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-100">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">增长率</span>
            <div class="flex items-center">
              <span class="text-sm font-medium text-green-600">{{ projectData.totalProjects.growthRate }}</span>
              <i class="fas fa-arrow-up text-green-500 text-xs ml-1"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 模块总数卡片 -->
      <div class="rounded-lg border border-gray-200 bg-white shadow-sm p-5">
        <div class="flex items-center justify-between mb-4">
          <div>
            <h3 class="text-sm font-medium text-gray-500">模块总数</h3>
            <p class="text-2xl font-bold text-gray-800 mt-1">{{ projectData.totalModules.count }}</p>
          </div>
          <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
            <i class="fas fa-cubes text-amber-500 text-lg"></i>
          </div>
        </div>
        <div class="space-y-3">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">本月新增</span>
            <span class="text-sm font-medium text-green-600">{{ projectData.totalModules.monthly }}</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">基础模块</span>
            <span class="text-sm font-medium text-amber-600">{{ projectData.totalModules.basic }}</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">功能模块</span>
            <span class="text-sm font-medium text-amber-600">{{ projectData.totalModules.functional }}</span>
          </div>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-100">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">复用率</span>
            <div class="flex items-center">
              <span class="text-sm font-medium text-green-600">{{ projectData.totalModules.reuseRate }}</span>
              <i class="fas fa-arrow-up text-green-500 text-xs ml-1"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 模型总数卡片 -->
      <div class="rounded-lg border border-gray-200 bg-white shadow-sm p-5">
        <div class="flex items-center justify-between mb-4">
          <div>
            <h3 class="text-sm font-medium text-gray-500">模型总数</h3>
            <p class="text-2xl font-bold text-gray-800 mt-1">{{ projectData.totalModels.count }}</p>
          </div>
          <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
            <i class="fas fa-database text-amber-500 text-lg"></i>
          </div>
        </div>
        <div class="space-y-3">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">本月新增</span>
            <span class="text-sm font-medium text-green-600">{{ projectData.totalModels.monthly }}</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">数据模型</span>
            <span class="text-sm font-medium text-amber-600">{{ projectData.totalModels.data }}</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">业务模型</span>
            <span class="text-sm font-medium text-amber-600">{{ projectData.totalModels.business }}</span>
          </div>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-100">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-500">使用率</span>
            <div class="flex items-center">
              <span class="text-sm font-medium text-green-600">{{ projectData.totalModels.usageRate }}</span>
              <i class="fas fa-arrow-up text-green-500 text-xs ml-1"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.text-amber-500 {
  color: #f59e0b;
}
.bg-amber-100 {
  background-color: #fef3c7;
}
</style> 